
/* 第四个div 网游竞技 */
.onlinegame {
	width: 100%;
	height: 400px;
	/* background-color: #EE82EE; */
}

.onlinegame>div {
	float: left;
}

.onlinegame>.online_left {
	width: 712px;
	height: 100%;
	/* background-color: #8A2BE2 */
}

.onlinegame>.online_left>.online_lefts {
	width: 712px;
	height: 50px;
	/* background-color: yellow; */
}

.onlinegame>.online_left>.online_lefts>div {
	float: left;
}

.onlinegame>.online_left>.online_lefts>.on1 {
	width: 170px;
	height: 100%;
	/* background-color: palegreen; */
}

.onlinegame>.online_left>.online_lefts>.on1>img {
	width: 40px;
	height: 40px;
	margin-top: 5px;
}

.onlinegame>.online_left>.online_lefts>.on1>span {
	font-size: 30px;
	width: 120px;
	float: right;
	margin-top: 3px;
	/* background-color: red; */
	display: inline-block;
}

.onlinegame>.online_left>.online_lefts>.on2>ul>li {
	float: left;
	list-style: none;
	margin-left: 10px;
	width: 70px;
	height: 20px;
	line-height: 20px;
	border-radius: 50px;
	text-align: center;
	
	/* background-color: pink; */
	font-size: 14px;
	border: 1px solid grey;
	margin-top: 10px;
	color: gray;
	cursor: pointer;
}

.onlinegame>.online_left>.online_lefts>.on3 {
	float: right;
}

.onlinegame>.online_left>.online_lefts>.on3>span {
	width: 70px;
	height: 20px;
	text-align: center;
	line-height: 20px;
	border: 1px solid grey;
	border-radius: 50px;
	margin-left: 20px;
	display: inline-block;
	font-size: 14px;
	margin-top: 10px;
	color: gray;
	cursor: pointer;
}

.online_leftx {
	width: 712px;
	height: 330px;
	/* background-color: #AFEEEE; */
}

.online_leftx>ul>li {
	float: left;
	list-style: none;
	width: 160px;
	height: 150px;
	margin-top: 10px;
	margin-right: 18px;
	border-radius: 5px;
	/* background-color: #8A2BE2; */
	cursor: pointer;
}

.online_leftx>ul>li>div>div {
	position: relative;
}

.online_leftx>ul>li>div>div>img {
	width: 160px;
	filter: brightness(90%);
	border-radius: 5px;

}

.online_leftx>ul>li>.hvideo>.hvideo11 {
	overflow: hidden;
}

.online_leftx>ul>li>.hvideo>.hvideo11>p {
	color: white;
	position: absolute;
	top: 60px;
	font-size: 12px;

}

.online_leftx>ul>li>div>div>p>.htu {
	margin-right: 10px;
}

/* 右边排行榜部分 */
.onlinegame>.online_right {
	width: 350px;
	height: 100%;
	float: right;
	border-radius: 8px;
	background-color: rgb(244, 245, 249);
}

.online_rights {
	width: 100%;
	height: 50px;
	background-image: url(../img/pbg.png);
	background-size: 100% 100%;
	/* background-color: #1883BA; */
}

.online_rights>div {
	float: left;
}

.online_rights>.pai {
	width: 150px;
	height: 50px;
	/* background-color: yellow; */
}

.online_rights>.pai>span {
	font-size: 30px;
	float: right;
	margin-top: 9px;
}

.online_rights>.pai1 {
	float: right;
}

.online_rights>.pai1>span {
	width: 70px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	border: 1px solid gray;
	border-radius: 50px;
	font-size: 14px;
	color: grey;
	display: inline-block;
	margin-right: 20px;
	margin-top: 10px;
}

.online_rightx>ul>li {
	list-style: none;
	height: 20px;
	width: 100%;
	/* border: 1px solid red; */
	position: relative;
	margin-top: 10px;
	cursor: pointer;
}

.online_rightx>ul>li>div {
	float: left;
}

.online_rightx>ul>li>.details>div {
	float: left;
	margin-left: 10px;
}

.online_rightx>ul>li>.details>.deta_l {
	width: 130px;
	height: 80px;
}

.online_rightx>ul>li>.details>.deta_l>img {
	width: 100%;
	height: 100%;
	border-radius: 5px;
}

.detal_r {
	width: 180px;
	height: 80px;
	display: inline-block;
	/* background-color: rosybrown; */
}

.detal_r>span {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.detal_r>p {
	font-size: 14px;
	color: #99A5C3;
	margin-top: 10px;
}

/* 上拉框代码 */
.shangla {
	display: none;
	position: absolute;
	top: -160px;
	left: 0px;
	width: 330px;
	height: 150px;
	/* border: 1px solid black; */
	background-color: white;
	box-shadow: 3px 3px 3px gray;
	border-radius: 8px;
}

.shangla>.las {
	margin-left: 15px;
	width: 300px;
	height: 90px;
	border-bottom: 1px solid gray;

	margin-top: 15px;
}

.shangla>.las>div {
	float: left;

}

.shangla>.las>.lasl {
	width: 130px;
	height: 80px;
}

.shangla>.las>.lasl>img {
	width: 100%;
	height: 100%;
	border-radius: 8px;
}

.shangla>.las>.lasxia {
	width: 160px;
	height: 80px;
	margin-left: 8px;
	/* border: 1px solid black; */
}

.shangla>.las>.lasxia>span {
	font-size: 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.shangla>.las>.lasxia>p {
	font-size: 12px;
	color: #99A5C3;
	margin-top: 15px;
}

.shangla>.lax {
	width: 300px;
	height: 30px;
	margin-left: 10px;
	margin-top: 10px;
	/* border: 1px solid black; */
}

.shangla>.lax>span {
	color: #99A5C3;
	margin-right: 30px;
}

.online_rightx>ul>li>span {
	margin-left: 10px;
	float: left;
}

.online_rightx>ul>li>.ss {
	width: 300px;
	height: 20px;
	/* border: 1px solid blue; */
	font-size: 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
